<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
  <!-- Content Header (Page header) -->
  <section class="content-header">
    <h1>
      用户管理
      <small>对用户信息进行增加、删除、修改</small>
    </h1>
    <ol class="breadcrumb">
      <li>
        <a href="#"><i class="fa fa-gears"></i> 系统管理</a>
      </li>
      <li class="active">权限管理</li>
      <li class="active">用户管理</li>
    </ol>
  </section>

  <!-- Main content -->
  <section class="content">
    <div class="row">
      <div class="col-xs-12">
        <div class="box">
          <div class="box-header">
            <h3 class="box-title">用户列表</h3>
            <button class="btn btn-warning btn-flat pull-right" data-toggle="modal" data-target="#addModal">添加用户</button>
          </div>
          <!-- /.box-header -->
          <div class="box-body">
            <table id="example2" class="table table-bordered table-hover" [mfData]="users" #mf="mfDataTable" [mfRowsOnPage]="10">
              <thead>
                <tr>
                  <th>编号</th>
                  <th><mfDefaultSorter by="real_name">姓名</mfDefaultSorter></th>
                  <th><mfDefaultSorter by="username">用户名</mfDefaultSorter></th>
                  <th><mfDefaultSorter by="license">驾驶证号</mfDefaultSorter></th>
                  <th><mfDefaultSorter by="role.r_name">角色</mfDefaultSorter></th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                <tr *ngFor="let user of mf.data">
                  <td>{{ user.id }}</td>
                  <td>{{ user.real_name }}</td>
                  <td>{{ user.username }}</td>
                  <td>{{ user.license }}</td>
                  <td>{{ user.role.r_name }}</td>
                  <td>
                    <span class="label label-success cursor-hand" data-toggle="modal" data-target="#editModal" (click)="getUserInfo(user.id)"> 修改 </span>
                    &nbsp;
                    <span class="label label-danger cursor-hand" data-toggle="modal" data-target="#deleteModal" (click)="getUserId(user.id)"> 删除 </span>
                  </td>
                </tr>
              </tbody>
              <tfoot>
                <tr>
                  <td colspan="10">
                    <mfBootstrapPaginator [rowsOnPageSet]="[5, 10, 25]"></mfBootstrapPaginator>
                  </td>
                </tr>
              </tfoot>
            </table>
          </div>
          <!-- /.box-body -->
        </div>
        <!-- /.box -->
      </div>
      <!-- /.col -->
    </div>
    <!-- /.row -->
  </section>
  <!-- /.content -->
</div>
<!-- /.content-wrapper -->

<!-- addModal -->
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="addModalLabel">添加用户</h4>
      </div>
      <div class="modal-body">
        <div class="modal-width">
          <!-- form start -->
          <form class="form-horizontal">
            <div class="box-body">
              <div class="form-group">
                <label for="addRealName" class="col-sm-2 control-label">姓名</label>
                <div class="col-sm-10">
                  <input type="text" class="form-control" name="realname" [(ngModel)]="addRealName" placeholder="姓名" />
                </div>
              </div>
              <div class="form-group">
                <label for="addInputName" class="col-sm-2 control-label">用户名</label>
                <div class="col-sm-10">
                  <input type="text" class="form-control" name="username" [(ngModel)]="addInputName" placeholder="用户名" />
                </div>
              </div>
              <div class="form-group">
                <label for="addLicense" class="col-sm-2 control-label">驾驶证号</label>
                <div class="col-sm-10">
                  <input type="text" class="form-control" name="license" [(ngModel)]="addLicense" placeholder="驾驶证号" />
                </div>
              </div>
              <!-- select -->
              <div class="form-group">
                <label class="col-sm-2 control-label">角色</label>
                <div class="col-sm-10">
                  <select class="form-control" [(ngModel)]="addSelectRole" name="role">
                    <option *ngFor="let role of roles" value="{{ role.r_id }}">{{ role.r_name }}</option>
                  </select>
                </div>
              </div>
              <div class="form-group">
                <label for="addInputPassword" class="col-sm-2 control-label">密码</label>

                <div class="col-sm-10">
                  <input type="password" class="form-control" name="password" [(ngModel)]="addInputPassword" placeholder="密码" />
                  <span class="text-red">默认初始密码为：123456</span>
                </div>
              </div>
            </div>
          </form>
        </div>
      </div>
      <div class="modal-footer">
        <p class="label label-danger add-wrong-tip" [ngClass]="{ 'div-display': judgeAddInput }" style="margin-top: 5px;float: left;">{{ tip }}</p>
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="submit" class="btn btn-primary" (click)="addUser()">添加</button>
      </div>
    </div>
  </div>
</div>

<!-- editModal -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="editModalLabel">修改用户</h4>
      </div>
      <div class="modal-body">
        <div class="modal-width">
          <!-- form start -->
          <form class="form-horizontal">
            <div class="box-body">
              <div class="form-group">
                <label for="editRealName" class="col-sm-3 control-label">姓名</label>
                <div class="col-sm-9">
                  <input type="text" class="form-control" name="realname" [(ngModel)]="editRealName" placeholder="姓名" />
                </div>
              </div>
              <div class="form-group">
                <label for="editInputName" class="col-sm-3 control-label">用户名</label>
                <div class="col-sm-9">
                  <input type="text" class="form-control" name="username" [(ngModel)]="editInputName" placeholder="用户名" />
                </div>
              </div>
              <div class="form-group">
                <label for="editLicense" class="col-sm-3 control-label">驾驶证号</label>
                <div class="col-sm-9">
                  <input type="text" class="form-control" name="license" [(ngModel)]="editLicense" placeholder="驾驶证号" />
                </div>
              </div>
              <!-- select -->
              <div class="form-group">
                <label class="col-sm-3 control-label">角色</label>
                <div class="col-sm-9">
                  <select class="form-control" name="role" [(ngModel)]="editSelectRole">
                    <option *ngFor="let role of roles" value="{{ role.r_id }}">{{ role.r_name }}</option>
                  </select>
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-3 control-label">重置密码</label>

                <div class="col-sm-9">
                  <div class="radio">
                    <label>
                      <input type="radio" name="optionsRadios" [(ngModel)]="editRadio" value="yes" />
                      是
                    </label>
                    &nbsp;&nbsp;
                    <label>
                      <input type="radio" name="optionsRadios" [(ngModel)]="editRadio" value="no" />
                      否
                    </label>
                    <input *ngIf="editRadio == 'yes'" type="password" class="form-control" name="password" [(ngModel)]="editInputPassword" placeholder="密码" />
                  </div>
                </div>
              </div>
            </div>
          </form>
        </div>
      </div>
      <div class="modal-footer">
        <p class="label label-danger edit-wrong-tip" [ngClass]="{ 'div-display': judgeEditInput }" style="margin-top: 5px;float: left;">{{ tip }}</p>
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="submit" class="btn btn-primary" (click)="editUser()">修改</button>
      </div>
    </div>
  </div>
</div>

<!--模态框删除-->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="deleteModalLabel">删除用户</h4>
      </div>
      <div class="modal-body">
        <div class="form-horizontal" role="form">
          <div class="fcol-sm-5 ">
            <p>确定要删除本用户吗？</p>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <p class="label label-danger delete-wrong-tip" [ngClass]="{ 'div-display': judgeDelete }" style="margin-top: 5px;float: left;">{{ tip }}</p>
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="submit" class="btn btn-primary" (click)="deleteUser()">删除</button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>
<!-- /.modal -->
